<template>
  <!-- 表格卡片 -->
  <a-card size="small" :bordered="false" :hoverable="true" :scroll="{ x: 1500 }">
    <a-row class="smart-table-btn-block">
      <div class="smart-table-operate-block">
        <a-row :gutter="16">
          <a-col :span="10"> <a-input v-model:value="queryForm.key" placeholder="关键字查询" /></a-col>
          <a-col :span="5">
            <a-button type="primary" @click="getInitDateFind"><SearchOutlined />查询</a-button></a-col
          >
          <a-col :span="2">
            <a-button @click="getRemase"><ReloadOutlined />重置</a-button></a-col
          >
        </a-row>
      </div>
      <div class="smart-table-setting-block">
        <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.OA.ENTERPRISE" :refresh="getInitDate" />
      </div>
    </a-row>
    <a-table
      size="small"
      :dataSource="tableData"
      :columns="columns"
      :row-key="(record) => record.blinfoid"
      :pagination="false"
      :loading="tableLoading"
      bordered
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.dataIndex === 'action'" title="操作">
          <div class="smart-table-operate">
            <a-space>
              <a-button type="primary" @click="getAddInstantly(1, record.blinfoid)" size="small">
                <FormOutlined />
              </a-button>
            </a-space>
          </div>
        </template>
        <template v-if="column.dataIndex === 'blapplyprojectname'" title="项目名称">
          <div class="smart-table-operate">
            <span style="color: #66a5fd" @click="getAddInstantly(2, record.blinfoid)"> {{ record.blapplyprojectname }}</span>
          </div>
        </template>
        <template v-if="column.dataIndex === 'blapplyprojectapplystatus'" title="审核流程">
          <div>
            <div class="smart-table-operate">
              <span style="color: #66a5fd" @click="showModal(record.blinfoid)" v-if="record.blapplyprojectapplystatus == 10"> 点击上传扫描件</span>
              <span v-if="record.blapplyprojectapplystatus == 7"> 扫描件已上传 </span>
              <span style="color: #66a5fd" @click="getAddInstantly(1, record.blinfoid)"> 点击查看记录</span>
            </div>
          </div>
        </template>
      </template>
    </a-table>
    <!-- 分页-->
    <div class="smart-query-table-page">
      <a-pagination
        showSizeChanger
        showQuickJumper
        show-less-items
        :pageSizeOptions="PAGE_SIZE_OPTIONS"
        :defaultPageSize="queryForm.limit"
        v-model:current="queryForm.page"
        v-model:pageSize="queryForm.limit"
        :total="total"
        @change="getInitDate"
        @showSizeChange="getInitDate"
        :show-total="(total) => `共${total}条`"
      />
    </div>
  </a-card>
  <!-- 上传扫描件 -->
  <a-modal v-model:open="open" title="上传扫描件">
    <a-upload-dragger
      v-model:fileList="fileList"
      name="file"
      @change="handleChange"
      :max-count="1"
      :before-upload="beforeUpload"
      :accept="'.pdf, .doc, .docx,image/jpg,image/jpeg,image/png'"
      :customRequest="customUploadBook"
    >
      <p class="ant-upload-drag-icon">
        <inbox-outlined></inbox-outlined>
      </p>
      <p class="ant-upload-text">单击或者拖动文件到此区域进行上传</p>
      <p class="ant-upload-hint">仅支持上传doc/docx/pdf/jepg/jpg/png</p>
    </a-upload-dragger>
    <template #footer>
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button key="submit" type="primary" @click="handleOk" :disabled="fileList.length ? false : true">提交</a-button>
    </template>
  </a-modal>
</template>
<script setup>
  import { reactive, ref, onMounted, defineEmits, toRaw } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
  import TableOperator from '/@/components/support/table-operator/index.vue';
  import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
  import { Project } from '../../../../api/project/project';
  import { smartSentry } from '/@/lib/smart-sentry';
  //--------------------------- 表格 列 ---------------------------
  const columns = ref([
    {
      title: '项目名称',
      dataIndex: 'blapplyprojectname',
      align: 'center',
      width: 150,
    },

    {
      title: '项目负责人',
      dataIndex: 'blprojectmanagepeople',
      align: 'center',
    },
    {
      title: '申报时间',
      dataIndex: 'blapplyprojectapplydate',
      align: 'center',
    },
    {
      title: '申报状态',
      dataIndex: 'fromTo',
      align: 'center',
    },
    {
      title: '审核流程',
      dataIndex: 'blapplyprojectapplystatus',
      align: 'center',
    },
    {
      title: '项目编号',
      dataIndex: 'blext2',
      align: 'center',
    },
  ]);
  const queryFormState = {
    page: 1,
    limit: PAGE_SIZE,
  };
  const queryForm = reactive({ ...queryFormState });
  const tableLoading = ref(false);
  const tableData = ref([]);
  const total = ref(0);
  const getInitDateFind = () => {
    message.success('查询成功');
    getInitDate();
  };
  // 表格初始化
  async function getInitDate() {
    try {
      let res = await Project.Auditslist(queryForm);
      console.log(res, '审批');
      tableData.value = res.page.list;
      total.value = res.page.totalCount;
    } catch (error) {
      smartSentry.captureError(error);
    }
  }
  // 上传扫描件
  const open = ref(false);
  const bookId = ref();
  const fileList = ref([]);
  const bookFile = ref([]);
  const showModal = (id) => {
    bookId.value = id;
    open.value = true;
  };

  //上传申报书文件上传模块
  const handleChange = (data) => {
    console.log('进入errror', data.file.status);
    if (data.file.status == 'uploading') {
      //改变上传的状态显示图片
      data.file.status = 'done';
      fileList.value = [...data.fileList];
    } else if (data.file.status == 'removed') {
      //如果状态为remove就删除
      fileList.value = data.fileList;
      bookFile.value = '';
    } else if (!data.file.status) {
      fileList.value = [];
    }
  };
  //对上传申报书做校验
  function beforeUpload(file) {
    let fileType = file.name.split('.');
    const fileDate = fileType.slice(-1);
    console.log(['doc', 'docx', 'pdf', 'jpeg', 'jpg', 'png'].indexOf(fileDate[0]));
    if (['doc', 'docx', 'pdf', 'jpeg', 'jpg', 'png'].indexOf(fileDate[0]) < 0) {
      message.error('仅支持文件格式：.doc、.docx、pdf、jpeg、jpg、png格式附件!');
      return false;
    }
    const isLt200M = file.size / 1024 / 1024 < 100;
    if (!isLt200M) {
      message.error('附件大小不能超过100M!');
      return false;
    }
    return true;
  }
  function customUploadBook(file) {
    bookFile.value = file.file;
  }
  //申报书上传方法
  const handleOk = async (e) => {
    open.value = false;
    try {
      let formData = new FormData();
      formData.append('file', bookFile.value);
      let res = await Project.FileUpload(bookId.value, formData);
      open.value = false;
      fileList.value = [];
      bookFile.value = '';
      message.success('上传成功');
      getInitDate();
    } catch (error) {
      fileList.value = [];
      bookFile.value = '';
      smartSentry.captureError(error);
    }
  };
  const handleCancel = () => {
    open.value = false;
  };
  const getRemase = () => {
    message.success('重置成功');
    queryForm.key = '';
    getInitDate();
  };
  //返回立项申请表格页面
  const emit = defineEmits();
  const getAddInstantly = (e, id) => {
    let obj = {
      type: e,
      id: id,
    };
    emit('getBlack', obj);
  };

  onMounted(() => {
    getInitDate();
  });
</script>
